import { Badge } from '/components/badge'

# Slots

Starting from version 3.0, Umo Editor provides slot functionality, allowing users to implement more custom features through slots.

## Toolbar Slots

Use slots to insert custom content after specific menus in the toolbar.

```vue
<template>
  <umo-editor v-bind="options">
    <!-- Slot for the "Base" menu -->
    <template #toolbar_base="props">
      <span>toolbar_base slot: {{ props }}</span>
    </template>
    <!-- Slot for the "Insert" menu -->
    <template #toolbar_insert="props">
      <span>toolbar_insert slot: {{ props }}</span>
    </template>
    <!-- Slot for the "Table" menu -->
    <template #toolbar_table="props">
      <span>toolbar_table slot: {{ props }}</span>
    </template>
    <!-- Slot for the "Tools" menu -->
    <template #toolbar_tools="props">
      <span>toolbar_tools slot: {{ props }}</span>
    </template>
    <!-- Slot for the "Page" menu -->
    <template #toolbar_page="props">
      <span>toolbar_page slot: {{ props }}</span>
    </template>
    <!-- Slot for the "Export" menu -->
    <template #toolbar_export="props">
      <span>toolbar_export slot: {{ props }}</span>
    </template>
  </umo-editor>
</template>

<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>
```

### Named Slots

- `toolbar_base`: Insert custom content after the "Start" menu in the toolbar.
- `toolbar_insert`: Insert custom content after the "Insert" menu in the toolbar.
- `toolbar_table`: Insert custom content after the "Table" menu in the toolbar.
- `toolbar_tools`: Insert custom content after the "Tools" menu in the toolbar.
- `toolbar_page`: Insert custom content after the "Page" menu in the toolbar.
- `toolbar_export`: Insert custom content after the "Export" menu in the toolbar.

### Slot Parameters

- `toolbar-mode`: `String` The toolbar type currently selected by the user. Possible values are: `ribbon`, `classic`.

## Bubble Menu Slot

Use slots to insert custom content after the bubble menu. Currently, only adding custom content to text nodes is supported.

```vue
<template>
  <umo-editor v-bind="options">
    <template #bubble_menu>
      <span>slot</span>
    </template>
  </umo-editor>
</template>

<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>
```
